<!--
 * @Descripttion: 
 * @version: 
 * @@Company: DCIT-SH
 * @Author: 王富银
 * @Date: 2024-08-12 21:52:14
 * @LastEditors: Sunny Chen
 * @LastEditTime: 2024-08-20 22:32:16
-->
<template>
  <Panle
    v-for="panel in panelArr"
    :title="panel.title"
    :top="panel.top"
    :leftOrRight="panel.leftOrRight"
    :currentComponent="defineCompoent(panel.component)"
  ></Panle>
</template>

<script setup>
import Panle from "@/components/Panle.vue";
import { onMounted, onUnmounted, defineAsyncComponent } from "vue";
import { useMapStore,usePostStore } from "@/stores";
const mapStroe = useMapStore();
const postStore = usePostStore();
const {updateEnterDataCenterView} = postStore;
const map = mapStroe.Map;
const controls = mapStroe.Controls;
const top = window.innerHeight * 0.07;
const panelArr = [
  {
    title: "新坏对比",
    leftOrRight: "left",
    top: top,
    component: "NewBadComparison",
  },
  {
    title: "近日车辆状态",
    leftOrRight: "left",
    top: top + 200 * 1 + 30,
    component: "RecentlyCarsState",
  },
  {
    title: "形成里程占比",
    top: top + 200 * 2 + 60,
    leftOrRight: "left",
    component: "TravelProportion",
  },
  {
    title: "上周骑行次数",
    top: top,
    leftOrRight: "right",
    component: "LastWeekRideCount",
  },
  {
    title: "新坏对比",
    top: top + 200 * 1 + 30,
    leftOrRight: "right",
    component: "NewBadComparison",
  },
  {
    title: "新坏对比",
    top: top + 200 * 2 + 60,
    leftOrRight: "right",
    component: "NewBadComparison",
  },
];
onMounted(() => {
    controls.forEach(control=>{
        map.removeControl(control);
    })
  updateEnterDataCenterView(true);
  map.setStyle("mapbox://styles/mapbox/dark-v10");
});
onUnmounted(() => {
    controls.forEach(control=>{
        map.addControl(control);
    })
  map.setStyle("mapbox://styles/mapbox/streets-v12");
});
const defineCompoent = (name) => {
  return defineAsyncComponent(() => {
    return new Promise((resolve, reject) => {
      const component = import(`@/components/panles/${name}.vue`);
      resolve(component);
    });
  });
};
</script>

<style scoped></style>
